import React, {PureComponent} from "react";
import {actionCreators} from "../main/store";
import {Steps, Icon, Progress, Button, message} from 'antd';
import {connect} from "react-redux";

const {Step} = Steps;

class HomeComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.isComponentWillUnMount = false;
    }

    componentDidMount() {
        this.props.loadAPPExecTimeList();
        this.props.loadNextDayExecTime();
        this.props.connectionExecCurrWS((info) => {
            if (!this.isComponentWillUnMount) {
                this.forceUpdate();
            }
        });
    }

    componentWillUnmount() {
        this.isComponentWillUnMount = true;
    }

    allDevicesBtnStartClick = e => {
        this.props.loadRYMStart(msg => {
            message.success(msg);
        });
    };

    allDevicesBtnStopClick = e => {
        this.props.loadRYMStop(msg => {
            message.success(msg);
        });
    };

    render() {
        const {appExecTimeList, currentAppInfo, nextDayExecTime} = this.props;
        return (
            <div style={{overflow: 'scroll', height: (window.document.body.scrollHeight - 64 - 75) + 'px'}}>
                <div style={{
                    backgroundColor: '#e0e0e0',
                    marginBottom: '10px',
                    padding: '16px'
                }}>程序明天执行时间:&nbsp;&nbsp;[AM {nextDayExecTime.nextStartHour}时{nextDayExecTime.nextStartMinute}分{nextDayExecTime.nextStartSecond}秒]
                    <div className={'all-control-content'}>
                        <Button onClick={this.allDevicesBtnStartClick} type="primary">开始执行</Button>
                        <div style={{width: 30}}/>
                        <Button onClick={this.allDevicesBtnStopClick} type="danger">结束执行</Button>
                        <div style={{width: 30}}/>
                    </div>
                </div>
                {
                    appExecTimeList.map((execItem, execIndex) => {
                        return (<div key={execIndex} className={'steps-content'}>
                            <div style={{
                                backgroundColor: '#e0e0e0',
                                marginBottom: '10px',
                                padding: '10px'
                            }}>第{execIndex + 1}轮执行
                            </div>
                            <Steps direction="vertical">
                                {execItem.map((childItem, childIndex) => {
                                    if (currentAppInfo != null && currentAppInfo.loopIndex != null && currentAppInfo.childIndex != null) {
                                        if (currentAppInfo.loopIndex > execIndex) {
                                            //已经执行完
                                            return (<Step key={childIndex}
                                                          status={'finish'}
                                                          title={`${childItem.name} ${childItem.appVersion}`}
                                                          subTitle={`[执行时长:${childItem.time / 60}分钟-时间权重:${childItem.weight}]`}
                                                          description={<Progress className={'progress-item'}
                                                                                 percent={100}/>}/>);
                                        } else if (currentAppInfo.loopIndex === execIndex) {
                                            //每一个分组
                                            if (currentAppInfo.childIndex > childIndex) {
                                                //已经执行完
                                                return (<Step key={childIndex}
                                                              status={'finish'}
                                                              title={`${childItem.name} ${childItem.appVersion}`}
                                                              subTitle={`[执行时长:${childItem.time / 60}分钟-时间权重:${childItem.weight}]`}
                                                              description={<Progress className={'progress-item'}
                                                                                     percent={100}/>}/>);
                                            } else if (currentAppInfo.childIndex === childIndex) {
                                                let timestamp = (new Date()).getTime() / 1000;
                                                let percentNum = parseInt((timestamp - currentAppInfo.beginTime) / currentAppInfo.runTime * 100);
                                                let percent = percentNum > 100 ? 100 : percentNum;
                                                return (<Step key={childIndex}
                                                              status={percent >= 100 ? 'finish' : 'process'}
                                                              title={`${childItem.name} ${childItem.appVersion}`}
                                                              subTitle={`[执行时长:${childItem.time / 60}分钟-时间权重:${childItem.weight}]`}
                                                              description={<Progress className={'progress-item'}
                                                                                     percent={percent}/>}
                                                              icon={percent >= 100 ? null : <Icon type="loading"/>}/>);
                                            }
                                        }
                                    }
                                    return (<Step key={childIndex}
                                                  status={'wait'}
                                                  title={`${childItem.name} ${childItem.appVersion}`}
                                                  subTitle={`[执行时长:${childItem.time / 60}分钟-时间权重:${childItem.weight}]`}
                                                  description={'[未开始执行]'}/>);
                                })}
                            </Steps>
                        </div>);
                    })
                }
            </div>
        );
    }
}

const mapState = (state) => ({
    appExecTimeList: state.getIn(['home', 'appExecTimeList']),
    currentAppInfo: state.getIn(['home', 'currentAppInfo']),
    nextDayExecTime: state.getIn(['home', 'nextDayExecTime']),
});

const mapDispatch = (dispatch) => ({
    loadAPPExecTimeList() {
        dispatch(actionCreators.loadAPPExecTimeList())
    },
    loadNextDayExecTime() {
        dispatch(actionCreators.loadNextDayExecTime())
    },
    connectionExecCurrWS(func) {
        actionCreators.connectionExecCurrWS(dispatch, func)
    },
    loadRYMStart(func) {
        dispatch(actionCreators.loadRYMStart(func))
    },
    loadRYMStop(func) {
        dispatch(actionCreators.loadRYMStop(func))
    }
});

export default connect(mapState, mapDispatch)(HomeComponent);
